<script lang="ts" setup>
import { IBanner } from '../../types';
import config from '@/common/config';

// typescript
interface IProps {
  banners: IBanner[]
}

const props = withDefaults(defineProps<IProps>(), {
  banners: () => []
});
</script>

<!-- banner组件 -->
<template>
  <view class="w-components-container">
    <swiper class="swiper" circular indicator-dots autoplay :interval="config.common.bannerInterval">
      <template v-for="banner in banners">
        <swiper-item>
          <view class="swiper-item">
            <image :src="banner.imageUrl"></image>
          </view>
        </swiper-item>
      </template>
    </swiper>
  </view>
</template>

<style scoped lang="scss">
// scss

.w-components-container {
  height: 100%;
  
  :deep(.swiper) {
    height: 100%;
    
    .uni-swiper-dots {
      .uni-swiper-dot {
        width: 38rpx;
        height: 4rpx;
        background-color: #fff;
        border-radius: 0;
        
        &.uni-swiper-dot-active {
          background-color: #FF6A00;
        }
      }
    }
  }
}

.swiper-item {
  width: 100%;
  height: 100%;
  
  image {
    width: 100%;
    height: 100%;
  }
}
</style>
